<template>
	<div id="menu-list" class="flex-container flex-column">
		<div class="list-title">
			<span>{{title}}</span>
		</div>
		<div class="list-body" ref="list_body" :style="{height:listBodyHeight}">
			<ul>
				<TreeItem :node="treeNodes"></TreeItem>
			</ul>
		</div>
	</div>

</template>

<script>
import TreeItem from "@/components/tree/TreeItem.vue";
import MenuList from "@/data/MenuList.json";
export default {
  name: "TreeList",
  props: {
    title: String
  },
  data() {
    return {
      listBodyHeight: null,
      treeNodes: MenuList
    };
  },
  components: {
    TreeItem
  },
  mounted() {
    this.listBodyHeight = this.$refs.list_body.offsetHeight - 20 + "px";
    this.$store.commit("updateCurrTreeNode", MenuList[0]);
  }
};
</script>

<style>
</style>
